<template>
	<view class="cart-container" v-if="cart.length !== 0">
    <!-- 收货地址 -->
    <my-address></my-address>
		<!-- 标题 -->
    <view class="cart-title">
      <uni-icons type="shop" size="18"></uni-icons>
      <text class="cart-title-text">购物车捏</text>
    </view>
    <!-- 购物车数据 -->
    <uni-swipe-action>
      <block v-for="(goods,i) in cart" :key="i">
        <uni-swipe-action-item :right-options="options" @click="delectGoods($event,goods)">
          <my-goods :goods="goods">
            <template v-slot:radio>
              <radio :checked="goods.goods_state" color="#f80" @click="radioChange(goods)"></radio>
            </template>
             <template v-slot:numbox>
              <view>
                <uni-number-box :max="99" :min="1" :value="goods.goods_count" @change="bindChange($event,goods)"></uni-number-box>
              </view>
            </template>
          </my-goods>
        </uni-swipe-action-item> 
      </block>
    </uni-swipe-action>
    <!-- 结算组件 -->
    <my-settle></my-settle>
  </view>
  <view class="cart_none" v-else>
    <image src="/static/cart_none.png" class="none_img"></image>
    <text class="none_text">空空如也~~~</text>
  </view>
</template>

<script>
  import tabbarMix from '@/mixins/tabbar-badge'
  import {mapState,mapMutations} from 'vuex'
  
	export default {
    mixins:[tabbarMix],
    watch:{
      
    },
		data() {
			return {
				options:[
          {
            text: '删除',
            style: {
                backgroundColor: '#c00000'
            },
          }
        ]
			};
		},
    computed:{
      ...mapState('Cart',['cart'])
    },
    methods:{
      radioChange(i){
        // console.log(i);
        i.goods_state = !i.goods_state;
        this.updateGooodsState(i);
      },
      //数量变化事件
      bindChange(val,i){
        // console.log(val,i);
        let goods = {
          goods_id:i.goods_id,
          goods_count:+val
        }
        // console.log(goods);
        this.updateGooodsCount(goods);
        // this.setBadge();
      },
      delectGoods(e,goods){
        // console.log(goods);
        // setTimeout(()=>{
           this.removeGoods(goods.goods_id)
           // this.setBadge();
        // })
      },
      ...mapMutations('Cart',['updateGooodsState','updateGooodsCount','removeGoods'])
    }
	}
</script>

<style lang="scss">
  .cart-container{
    padding-bottom: 50px;
  }
  .cart-title{
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    border-bottom: 1px solid #eee;
    .cart-title-text{
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .cart_none{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    .none_img{
      width: 300rpx;
      height: 300rpx;
    }
    .none_text{
      font-size: 12px;
      color: gray;
      margin-top: 10px;
    }
  }
</style>
